@import '~styles/settings.scss';

.c-legend-type-choropleth {
  padding: 10px 0 0;

  ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;

    > li {
      padding: 0;
      flex: 1 1 auto;

      .label {
        display: block;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        font-size: 12px;
        text-align: center;
      }

      &:first-child {
        .label {
          text-align: left;
        }
      }

      &:last-child {
        .label {
          text-align: right;
        }
      }
    }
  }

  .name {
    display: block;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    text-align: center;
  }

  .icon-choropleth {
    display: block;
    height: 5px;
    margin-bottom: 5px;
  }

  @media screen and (max-width: $screen-s) {
    flex-direction: column;
    margin-top: 10px;

    > li {
      margin: 0;
      line-height: 21px;
    }

    .name {
      display: inline-block;
      margin-left: 5px;
    }

    .icon-choropleth {
      position: relative;
      top: 1px;
      display: inline-block;
      height: 12px;
      width: 12px;
      margin-bottom: 0;
    }
  }
}
